<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
    <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">
    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
    <script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="form" style="width: 400px;height: 200px;margin-top: 20px;margin-left: 20px;">

    <i-Form ref="formInline" :model="formInline" :rules="ruleInline">
        <Form-Item prop="user">
            <i-Input type="text" v-model="formInline.user" placeholder="Username">
                <Icon type="ios-person-outline" slot="prepend"></Icon>
            </i-Input>
        </Form-Item>
        <Form-Item prop="password">
            <i-Input type="password" v-model="formInline.password" placeholder="Password">
                <Icon type="ios-locked-outline" slot="prepend"></Icon>
            </i-Input>
        </Form-Item>
        <Form-Item prop="rememberMe">
            <Checkbox v-model="single">记住我</Checkbox>
        </Form-Item>
        <Form-Item>
            <i-button type="warning" @click="reset()">danger</i-button>
            <i-button type="primary" @click="submit(true)">Submit</i-button>
        </Form-Item>
    </i-Form>
</div>

</body>
<script type="text/javascript">
    var vm = new Vue({
        el: "#form",
        data: {
            formInline: {
                user: "",
                password: ""
            },
            single: false,
            ruleInline: {
                user: [
                    {required: true, message: 'Please fill in the user name', trigger: 'blur'}
                ],
                password: [
                    {required: true, message: 'Please fill in the password.', trigger: 'blur'},
                    {type: 'string', min: 2, message: 'The password length cannot be less than 2 bits', trigger: 'blur'}
                ]
            }
        },
        methods: {
            submit: function (desc) {
                $.ajax({
                    url: "http://localhost:8080/subLogin",
                    type: 'POST',
                    data: {
                        username: this.formInline.user,
                        password: this.formInline.password,
                        single: this.single
                    },
                    success: function (result) {
                        if (result == "login success") {
                            console.log("授权成功");
                            // vm.$Message.success('登陆成功');
                            vm.$Notice.success({
                                title: '登录成功',
                                desc: desc ? '' : '登陆成功.......',
                                duration: 2
                            });
                            setTimeout(function () {
                                // window.location.href = "http://www.baidu.com";
                            }, 5000);
                        } else {
                            console.log("授权失败");
                            // vm.$Message.error("登陆失败");
                            vm.$Notice.error({
                                title: '登录失败',
                                desc: desc ? '' : '登陆失败.......',
                                duration: 3
                            });
                            setTimeout(function () {
                                // window.location.href = "http://localhost:8080/login.html";
                            }, 5000);
                        }
                    }
                })
            },
            reset: function () {
                this.formInline.user = "";
                this.formInline.password = "";
            },
            clickHandle: function () {
                alert(this.single);

            }

        }
    });

</script>
</html>